import React from 'react'
import styles from './SideMenu.module.css'
import { sideMenuList } from './mockup'
import { Menu } from 'antd'
import { GifOutlined } from '@ant-design/icons'

const { SubMenu, Item } = Menu
export const SideMenu: React.FC = () => {
	return (
		<Menu mode="vertical" className={styles['side-menu']}>
			{sideMenuList.map((m, index) => {
				return (
					<SubMenu
						key={`side-menu-${index}`}
						title={
							<span>
								<GifOutlined />
								{m.title}
							</span>
						}
					>
						{m.subMenu.map((sm, smindex) => {
							return (
								<SubMenu
									key={`sub-menu-${smindex}`}
									title={
										<span>
											<GifOutlined />
											{sm.title}
										</span>
									}
								>
									{sm.subMenu.map((sms, smsindex) => {
										return (
											<Item key={`sub-sub-menu-${smsindex}`}>
												<span>
													<GifOutlined />
													{sms}
												</span>
											</Item>
										)
									})}
								</SubMenu>
							)
						})}
					</SubMenu>
				)
			})}
		</Menu>
	)
}
